<template>
    <el-popover placement="bottom" :visible-arrow="false" :offset="offset" :popper-class="mod=='botsend'?'cmt-bot-face':'custom-face-pop'" width="360" trigger="click" v-model="isvisible">
        <div class="custom-face">
            <table>
                <tr v-for="(item, idx) in imgdatas" :key="idx">
                    <td v-for="(img, imx) in item.list" :key="imx">
                        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                            <i class="sm-tip" slot-content>{{svgText[img.srcn-1]}}</i>
                            <img loading="lazy" slot="reference" @click="(e)=>{handleSetValue(e,img.imgv,img.srcn)}" :src="'http://www.gameui.net/emoji/'+img.srcn+'.svg'" alt="">
                        </el-popover>
                    </td>
                </tr>
            </table>
        </div>
        <a class="fbtn face-btn" slot="reference" v-if="mod=='topsend'">
            <i class="fave-single-tip">表情</i>
        </a>
        <a class="fbtn add-face" slot="reference" v-if="mod=='botsend'">
            <i class="fave-single-tip">表情</i>
            添加表情
        </a>
    </el-popover>
</template>

<script>
export default {
    data() {
        return {
            isvisible:false,
            svgText:['敬礼','心心脸','撒花','微笑','玫瑰','笑哭','加油','调皮','发怒','100分','火','红包','流泪','飞吻','第一名','爱心','礼物','赞','弱','咖啡','鼓掌','胜利','闪耀','看看','碰拳','OK','得意','火箭'],
            imgdatas: []
        }
    },
    props:['txtId','mod','ispel','offset'],
    mounted() {
        let imgs = [];
        let item = { list: [] }
        for (let i = 1; i <= 7; i++) {
            item.list.push({srcn:i,imgv:'[em_'+i+']'});
            // item.list.push({src:this.getImg(i),imgv:'[em_'+i+']'});
        }
        imgs.push(item)

        item = { list: [] }
        for (let i = 8; i <= 14; i++) {
            item.list.push({srcn:i,imgv:'[em_'+i+']'});
            // item.list.push({src:this.getImg(i),imgv:'[em_'+i+']'});
        }
        imgs.push(item)

        item = { list: [] }
        for (let i = 15; i <= 21; i++) {
            item.list.push({srcn:i,imgv:'[em_'+i+']'});
            // item.list.push({src:this.getImg(i),imgv:'[em_'+i+']'});
        }
        imgs.push(item)

        item = { list: [] }
        for (let i = 22; i <= 28; i++) {
            item.list.push({srcn:i,imgv:'[em_'+i+']'});
            // item.list.push({src:this.getImg(i),imgv:'[em_'+i+']'});
        }
        imgs.push(item)
        this.imgdatas = imgs;
    },
    methods: {
        handleSetValue(e,img,imgidx){
            let textObj=$('#'+this.txtId).get(0);
            var rangeStart=textObj.selectionStart; 
			var rangeEnd=textObj.selectionEnd;

            if(this.ispel){
                rangeStart=window.getSelection().focusOffset;
                rangeEnd=window.getSelection().focusOffset;
                var tempStr1=textObj.innerHTML.substring(0,rangeStart); 
                var tempStr2=textObj.innerHTML.substring(rangeEnd); 
                textObj.innerHTML=(textObj.innerHTML+('<img loading="lazy" src="'+(this.$webdomainurl+'/emoji/'+imgidx+'.svg')+'"/>')).replace('<br/>',''); 
            }else{
                var tempStr1=textObj.value.substring(0,rangeStart); 
                var tempStr2=textObj.value.substring(rangeEnd); 
                textObj.value=tempStr1+img+tempStr2; 
            }

            if(this.ispel){
                this.$emit('change',textObj.innerHTML)
            }else{
                textObj.focus(); 
                var len=img.length; 
                textObj.setSelectionRange(rangeStart+len,rangeStart+len); 
                textObj.blur();
                this.$emit('change',textObj.value)
            }

            this.isvisible=false;
        },
        getImg(i) {
            return require(`@/assets/pro/nine_new/'${i}.svg`)
        }
    }
}
</script>

<style lang="less">
.fbtn{
    position: relative;
    user-select: none;
    .fave-single-tip{
        font-style: normal;
        position: absolute;
        top:-38px;
        white-space: nowrap;
        border-radius:4px;
        padding:4px 7px;line-height: 18px;
        background: #353540;
        box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);
        font-size:12px;
        left:-5px;
        opacity:0;
        z-index: -1;
        transition:.1s all linear;
    }
    &:hover{
        .fave-single-tip{
           opacity:1;
           z-index:1;
        }
    }
}
.add-face {
    background: url('../assets/pro/top_cmt_face.svg') no-repeat;
    background-position: left center;
    padding-left: 26px;
    background-size:20px 20px;
    height:28px;
    display:flex;
    align-items: center;
    transition:.1s all linear;
    &:hover {
        background: url('../assets/pro/top_cmt_face_active.svg') no-repeat;
        background-size:20px 20px;
        background-position: left center;
    }
}
.face-btn {
    width: 20px;
    height: 20px;
    background: url('../assets/pro/top_cmt_face.svg') no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    margin-right: 13px;
    transition:.1s all linear;
    &:after {
        content: '';
        width: 1px;
        background: #484848;
        height: 18px;
        margin: 0px 13px;
        position: absolute;
        left: 20px;
    }

    &:hover {
        background: url('../assets/pro/top_cmt_face_active.svg') no-repeat;
        background-size: cover;
    }
}
</style>